<template>
	<view>
		<view class="details-header dfj-flex dfj-flex-ai-c" :class="detailsHeader? 'details-header-on':''">
			<view>
				<view class="details-header-icon"><text class="dfj-icon icon-arrow-left" @tap="leftBack"></text></view>
			</view>
			<view class="dfj-flex-1 dfj-t-c details-header-center">商品详情</view>
			<view>
				<view class="details-header-icon"><text class="dfj-icon icon-share"></text></view>
			</view>
		</view>

		<view class="dfj-bg-white">
			<view>
				<swiper class="details-swiper-banner" :indicator-dots="true" :autoplay="true" :interval="5000" :circular="true">
					<swiper-item v-for="(item,index) in info.graph" :key="index">
						<image :src="item" style="width: 100%;height: 100%;" />
					</swiper-item>
				</swiper>
			</view>
			<view class="dfj-pd-20">
				<view class="">
					<text class="dfj-t-danger dfj-f-34">￥{{ info.productPrice }}</text><text class="dfj-t-999 dfj-f-26 dfj-mg-l-20">{{ info.salesVolume }}人付款</text>
				</view>
				<!-- <view class="dfj-t-999 dfj-f-20 dfj-mg-tb-15">市场价：0.0</view> -->
				<view class="dfj-t-333">{{ info.productTitle }}</view>
			</view>

		</view>
		<view class="dfj-bg-white dfj-mg-t-20 dfj-t-666">
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-30" @click="openPopup()">
				<view class="dfj-flex-1">库存</view>
				<view class="">
					{{ info.stock }} 件 <text class="dfj-icon icon-arrow-right"></text>
				</view>
			</view>
			<view class="dfj-bd-b-e5e dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-30">
				<view class="dfj-flex-1">运费</view>
				<view class="">
					包邮
				</view>
			</view>
			<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-30 dfj-bd-b-e5e">
				<view class="dfj-mg-r-20"><text class="dfj-icon icon-zhengpinbaozheng dfj-mg-r-20 dfj-t-base" /> 正品保障</view>
				<view><text class="dfj-icon icon-daifahuo dfj-mg-r-20 dfj-t-base" /> 闪电发货</view>
			</view>

			<view class="dfj-overflow-hide">
				<view class="dfj-pd-lr-20 dfj-pd-tb-30">
					<text class="dfj-icon icon-xiangqing dfj-mg-r-20 dfj-t-base"></text> 商品详情
				</view>
				<view>
					<block v-for="(item,index) in info.detail">
						<image style="width: 100%;height: auto;vertical-align: top;" mode="widthFix" class="dfj-v-t" :src="item.url" />
					</block>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="details-popup">
				<view class="details-popup-top">
					<view class="details-popup-top-img">
						<image style="width: 100%;height: auto;" mode="widthFix" :src="info.iconUrl" />
					</view>
					<view class="dfj-pd-t-20"><text class="dfj-f-35 dfj-t-danger">￥{{ info.productPrice }}</text><!-- <text class="dfj-mg-l-40 dfj-f-22 dfj-t-999"
						 style="text-decoration: line-through;">￥0.0</text> --></view>
					<view class="dfj-t-666">库存：{{ info.stock }}</view>
				</view>
				<view class="dfj-mg-t-50 dfj-pd-lr-30 dfj-pd-tb-50">
					<view class="dfj-t-666 dfj-mg-b-20">购买数量</view>
					<view>
						<uni-number-box :value="amount" :min="1" @change="bindChange"></uni-number-box>
					</view>
				</view>
				<view class="details-popup-bottom dfj-bg-base dfj-pd-tb-30 dfj-t-c dfj-t-white" @click="affirmCar">确认</view>
			</view>
		</uni-popup>
		<view style="padding-top: 90rpx;">
			<view class="details-nav">
				<block v-if="info.collect == 1"><uni-goods-nav :fill="true" :options="options2" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></block>
				<block v-else>
					<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
				</block>
				
			</view>
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			uniGoodsNav,
			uniPopup,
			uniNumberBox
		},
		data() {
			return {
				pId: 0,
				amount: 1,
				detailsHeader: false,
				info: '',

				swiper: [],
				options: [
					{
						icon: 'heart',
						text: '收藏',
						color: '',
					}, {
						icon: 'cart',
						text: '购物车'
					}
				],
				options2: [
					{
						icon: 'heart-filled',
						text: '已收藏',
						color: '#f00',
					}, {
						icon: 'cart',
						text: '购物车'
					}
				],
				isBuy: true,
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				value: 1

			}
		},
		created() {
		},
		onLoad(options) {
			this.pId = options.pId
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http({
					method: 'GET',
					url: '/sys/getProductInfo',
					data: {
						pId: this.pId,
						rnd:Math.random()
					}
				}).then(res => {
					this.info = res.data
				})
			},
			leftBack() {
				uni.navigateBack();
			},
			onClick(e) {
				console.log(e)
				console.log(e.index)
				if (e.index == 0) {
					console.log("收藏")
					if(this.info.collect == 0){
						this.$http({
							url: '/userOpt/addCollect',
							data: {
								productId: this.info.pId
							}
						}).then(res=>{
							if(res.flag){
								this.options[0] = {
									icon: 'heart-filled',
									text: '已收藏',
									color: '#f00',
								}
								this.options2[0] = {
									icon: 'heart-filled',
									text: '已收藏',
									color: '#f00',
								}
								e.content.icon = 'heart-filled';
								e.content.text = '已收藏';
								e.content.color = '#f00';
								uni.showToast({
									title: '收藏成功'
								})
								this.info.collect = 1
							}
						})
					}else{
						this.$http({
							url: '/userOpt/delCollect',
							data: {
								productId: this.info.pId
							}
						}).then(res=>{
							if(res.flag){
								this.options[0] = {
									icon: 'heart',
									text: '收藏',
									color: '',
								}
								this.options2[0] = {
									icon: 'heart',
									text: '收藏',
									color: '',
								}
								e.content.icon = 'heart';
								e.content.text = '收藏';
								e.content.color = '';
								uni.showToast({
									title: '取消收藏',
									icon: 'none'
								})
								this.info.collect = 0
							}
						})
					}
				}
				if (e.index == 1) {
					uni.switchTab({
						url: '/pages/car/car'
					});
				}
			},
			buttonClick(e) {
				/* console.log(e)
				this.options[2].info++*/
				if (e.index == 0) {
					this.isBuy = false
				} else {
					this.isBuy = true
				}
				this.$refs.popup.open()
			},
			openPopup() {
				this.$refs.popup.open()
			},
			bindChange(e) {
				this.amount = e
			},
			affirmCar() {
				if (this.isBuy) {
					//console.log("购买")
					let arr = []
					arr[0] = {}
					arr[0].pId = this.info.pId;
					arr[0].iconUrl = this.info.iconUrl;
					arr[0].productTitle = this.info.productTitle;
					arr[0].productPrice = this.info.productPrice;
					arr[0].amount = this.amount;
					sessionStorage.setItem('infos', JSON.stringify(arr))
					uni.navigateTo({
						url: `/pages/home/confirm-order?isCar=false`
					});
				} else {
					//console.log("加入购物车")
					this.$http({
						url: '/shopCart/addProductToShoppingCart',
						data: {
							productId: this.info.pId,
							amount: this.amount
						}
					}).then(res=> {
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(()=>{
							uni.hideToast()
						},2000)
					})
				}
				this.$refs.popup.close()
				console.log(this.value)
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.detailsHeader = true
			} else {
				this.detailsHeader = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details-swiper-banner {
		height: 750rpx;
	}

	.details-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.details-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		box-sizing: border-box;
		padding: 20rpx;
		transition: 1s;

		.details-header-icon {
			background: rgba(204, 204, 204, .6);
			border-radius: 100%;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
			transition: 1s;
		}

		.details-header-center {
			font-size: 30rpx;
			opacity: 0;
			color: #fff;
			transition: 1s;
		}

		&.details-header-on {
			background: #318CFF;

			.details-header-center {
				font-size: 30rpx;
				opacity: 1;
			}

			.details-header-icon {
				background: rgba(204, 204, 204, 0);
			}
		}
	}

	.details-popup {
		background: #fff;

		.details-popup-top {
			position: relative;
			padding-left: 35%;

			.details-popup-top-img {
				position: absolute;
				top: -50%;
				width: 200rpx;
				left: 30rpx;
			}
		}
	}
</style>
